﻿@page "/templates/create-project"
@page "/boilerplate/create-project"
@inherits AppComponentBase

<PageOutlet Url="templates/create-project"
            Title="Create project - Templates"
            Description="create project of the project templates of the bit platform" />

<div class="page-container">

    <BitText Typography="BitTypography.H3" Gutter>Create Project</BitText>
    <br />
    <BitText Typography="BitTypography.Subtitle1" Gutter>
        Let's make our next cross platform project a success with Bit.Boilerplate.
    </BitText>
    <br />
    <BitSticky Top="110px">
        <CodeBox>
            @GetFinalCommand()
        </CodeBox>
    </BitSticky>
    <br />

    <BitGrid Columns="2"
             VerticalSpacing="1rem"
             HorizontalSpacing="1rem">
        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Name</BitText>
                <BitTextField IsRequired @bind-Value="@name" Placeholder="Enter a name" MaxLength="60" Immediate DebounceTime="300" />
            </div>
            <br />
            <CodeBox>
                @GetNameCommand()
            </CodeBox>
            <br />
            It is required to specify a name for your project.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Server Database</BitText>
                <BitDropdown Placeholder="Choose database" Items="@database.Items" @bind-Value="@database.Value" />
            </div>
            <br />
            <CodeBox>
                @GetDatabaseCommand()
            </CodeBox>
            @switch (database.Value)
            {
                case "Sqlite":
                    <div>
                        The API project requires an Entity Framework Core DbContext for tables such as ASP.NET Core Identity.
                        <br />
                        <br />
                        Supported options include SqlServer, PostgreSQL, MySQL and Other.
                        <br />
                        <br />
                        For the default SQLite option, we'd recommend installing sqlite package for <a href="https://marketplace.visualstudio.com/items?itemName=ErikEJ.SQLServerCompactSQLiteToolbox" target="_blank">Visual Studio</a> and <a href="https://marketplace.visualstudio.com/items?itemName=yy0931.vscode-sqlite3-editor" target="_blank">Visual Studio Code</a>.
                    </div>
                    break;
                case "SqlServer":
                    <div>
                        You can use Sql Server LocalDb 2025 for development purposes.
                        <br />
                        It gets installed within Visual Studio by default, but you can either download it from <a href="https://download.microsoft.com/download/3/8/d/38de7036-2433-4207-8eae-06e247e17b25/SqlLocalDB.msi" target="_blank">here</a> or install it using PowerShell:
                        <CodeBox>$ProgressPreference = 'SilentlyContinue'; Invoke-WebRequest -Uri https://download.microsoft.com/download/3/8/d/38de7036-2433-4207-8eae-06e247e17b25/SqlLocalDB.msi -OutFile SqlLocalDB.msi; msiexec /i SqlLocalDB.msi /quiet</CodeBox>
                    </div>
                    break;
                case "PostgreSQL":
                    <div>
                        Download and install @database.Value <a href="https://www.postgresql.org/download/" target="_blank">here</a>.
                        Alternatively, use the following command:
                        <br />
                        <CodeBox>winget install --id=PostgreSQL.PostgreSQL.14</CodeBox>
                    </div>
                    break;
                case "MySQL":
                    <div>
                        Both <a href="https://mariadb.org/download" target="_blank">MariaDB</a> and MySql are supported.
                    </div>
                    break;
                case "Other":
                    <div>
                        Add the desired <a href="https://learn.microsoft.com/en-us/ef/core/providers/" target="_blank">database</a> package and configure it in the AddDbContextPool method which is located in the Program.Services.cs file within the Server.Api project.
                    </div>
                    break;
            }
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>File Storage</BitText>
                <BitDropdown Placeholder="Choose file storage" Items="@fileStorage.Items" @bind-Value="@fileStorage.Value" />
            </div>
            <CodeBox>
                @GetFileStorageCommand()
            </CodeBox>

            @switch (fileStorage.Value)
            {
                case "Local":
                    <div>
                        The API project includes an Attachment Controller responsible for handling user images,
                        including resizing and saving them in the WebP format using <a href="https://github.com/robinrodricks/FluentStorage" target="_blank">FluentStorage</a>
                        <br />
                        <br />
                        Local option stores files on local hard drive.
                    </div>
                    break;
                case "AzureBlobStorage":
                    <div>
                        Download and install Azure blob storage emulator <a href="https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azurite?tabs=npm%2Cblob-storage#install-azurite">here</a>.
                    </div>
                    break;
                case "S3":
                    <div>
                        Install and configure <a href="https://www.nuget.org/packages/FluentStorage.AWS" target="_blank">FluentStorage.AWS</a>, which supports Amazon S3.
                        This allows you to use any file storage solution compatible with S3, such as AWS, DigitalOcean Spaces, MinIO, Hetzner, Contabo etc.
                    </div>
                    break;
                case "Other":
                    <div>
                        Install and configure any of the <a href="https://www.nuget.org/profiles/hgupta" target="_blank">FluentStorage packages</a>.
                    </div>
                    break;
            }
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Pipeline</BitText>
                <BitDropdown Placeholder="Choose pipeline" Items="@pipeline.Items" @bind-Value="@pipeline.Value" />
            </div>
            <br />
            <CodeBox>
                @GetPipelineCommand()
            </CodeBox>
            <br />
            @switch (pipeline.Value)
            {
                case "None":
                    <div>
                        By selecting None, no CI/CD pipeline will be added.
                    </div>
                    break;
                case "GitHub":
                    <div>
                        Ensure a rapid and reliable deployment by utilizing a pipeline.
                        By selecting GitHub, CI/ CD pipelines will be set up using <a href="https://github.com/features/actions" target="_blank">Github Actions</a>.
                    </div>
                    break;
                case "Azure":
                    <div>
                        By selecting Azure, CI/ CD pipelines will be set up using <a href="https://azure.microsoft.com/en-us/products/devops/pipelines" target="_blank">Azure Devops</a>.
                    </div>
                    break;
            }
        </BitGridItem>

        <BitGridItem Class="grid-item md" ColumnSpan="2">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Aspire</BitText>
                <BitToggle @bind-Value="aspire.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <BitText Typography="BitTypography.Body1" Gutter>
                Aspire helps you publish your project not only on Azure, AWS, and Kubernetes, but also on a simple Linux VPS running a basic Docker Compose setup, automatically building the database, API projects, and more.
            </BitText>
            <br />
            <CodeBox>
                @GetAspireCommand()
            </CodeBox>
            <br />
            <BitText Typography="BitTypography.Body2">
     Aspire helps you build, test, and deploy distributed applications with ease. Learn more at <a href="https://learn.microsoft.com/en-us/dotnet/aspire/" target="_blank">ASP.NET Core Aspire</a>.
                <div class="video-container">
                        <iframe width="800" height="450"
                                allowfullscreen frameborder="0"
                                title="Aspire"
                                src="https://www.youtube.com/embed/-vd7quVCP1k?si=mf4GZrdqRYK6zZ25"
                                referrerpolicy="strict-origin-when-cross-origin"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
                </div>
                <CodeBox>dotnet tool install -g Aspire.Cli</CodeBox>
                Aspire requires Docker Desktop to be installed and running. Download and install Docker Desktop from <a href="https://www.docker.com/products/docker-desktop/" target="_blank">here</a>.
  </BitText>
        </BitGridItem>

        <BitGridItem Class="grid-item md" ColumnSpan="2">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>API</BitText>
                <BitDropdown Placeholder="Choose api" Items="@api.Items" @bind-Value="@api.Value" />
            </div>
            <br />
            <CodeBox>
                @GetApiCommand()
            </CodeBox>
            Select the API mode that best aligns with your specific requirements.
            <br />
            <br />
            @if (api.Value == "Integrated")
            {
                <div>
                    Easily debug and deploy Server.Web projects that serves restful API services, SSR, Blazor Server, Blazor Auto and pre-rendering.
                </div>
                <br />
                <div class="api-image-container">
                    <img class="image" src="images/templates/api-integrated.webp" />
                </div>
            }
            else
            {
                <div>
                    Conversely, if the parameter is set to Standalone, you will need to separately run and publish both the Server.Api and Server.Web projects.
                </div>
                <br />
                <div class="api-image-container">
                    <img class="image" src="images/templates/api-standalone.webp" />
                </div>
            }

        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Module</BitText>
                <BitDropdown Placeholder="Choose module" Items="@module.Items" @bind-Value="@module.Value" />
            </div>
            <br />
            <CodeBox>
                @GetModuleCommand()
            </CodeBox>
            Use this parameter to initialize the project with a module.
            The two available options are <a href="https://adminpanel.bitplatform.dev/" target="_blank">Admin Panel</a> and <a href="https://sales.bitplatform.dev/" target="_blank">Sales</a>.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Captcha</BitText>
                <BitDropdown Placeholder="Choose captcha" Items="@captcha.Items" @bind-Value="@captcha.Value" />
            </div>
            <br />
            <CodeBox>
                @GetCaptchaCommand()
            </CodeBox>
            <br />
            <div>
                @if (captcha.Value == "None")
                {
                    <div>
                        By setting this parameter to None, CAPTCHA won't be added to the project.
                    </div>
                }
                else
                {
                    <div>
                        To integrate Google <a href="https://www.google.com/recaptcha/about/" target="_blank">reCAPTCHA</a> into
                        the app, include --captcha reCaptcha in the dotnet new command. <a href="https://todo.bitplatform.dev/sign-up" target="_blank">Live demo</a>
                    </div>
                }
            </div>
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Push Notification (Native and Web Push)</BitText>
                <BitToggle @bind-Value="notification.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetNotificationCommand()
            </CodeBox>
            Setting this parameter to True enables native push notification using firebase and APN for Androiod, iOS and macOS apps alongside with Web Push for Web Browsers.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Sample</BitText>
                <BitToggle @bind-Value="sample.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetSampleCommand()
            </CodeBox>
            Use this parameter to initialize the project with a sample pages.
            Checkout demo sample at <a href="https://todo.bitplatform.dev/todo" target="_blank">Todo</a>.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Sentry</BitText>
                <BitToggle @bind-Value="sentry.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetSentryCommand()
            </CodeBox>
            Adding --sentry true parameter to the dotnet new command allows you to capture errors, crashes, and analytics data
            seamlessly across all supported platforms.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>AppInsights</BitText>
                <BitToggle @bind-Value="appInsight.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetAppInsightsCommand()
            </CodeBox>
            To enable Azure Application Insights for both server and client-side applications (including web),
            set the appinsights parameter to true. This option will configure the application to store logs such as
            errors and informational messages.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>SignalR</BitText>
                <BitToggle @bind-Value="signalR.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetSignalRCommand()
            </CodeBox>
            Enabling this parameter will include sample code for SignalR, which can be used to implement real-time functionalities, such as chat, in your Blazor project.
            <br />
            <br />
            <b>Note:</b>
            <br />
            Disabling this feature will affect AI Chatbot features.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Offline Database</BitText>
                <BitToggle @bind-Value="offlineDb.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetOfflineDbCommand()
            </CodeBox>
            Setting this parameter to True enables SQLite and Entity Framework Core,
            allowing for the development of an offline-capable cross platform application.
            <br />
            <br />
            Warning: It is advisable to use this option only when necessary, as integrating Entity Framework Core can increase application size and potentially reduce startup performance.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Cloudflare</BitText>
                <BitToggle @bind-Value="cloudflare.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetCloudflareCommand()
            </CodeBox>
            Integrating Cloudflare and placing your backend behind the Cloudflare CDN will significantly enhance the app's performance while reducing server load.
        </BitGridItem>

        <BitGridItem Class="grid-item md">
            <div class="row">
                <BitText Typography="BitTypography.H6" Gutter>Google Ads</BitText>
                <BitToggle @bind-Value="googleAds.Value" OnText="true" OffText="false" />
            </div>
            <br />
            <CodeBox>
                @GetGoogleAdsCommand()
            </CodeBox>
            Helps you earn money by displaying reward-based Google ads. <a href="https://adminpanel.bitplatform.dev/settings/UpgradeAccount" target="_blank">Demo</a>
        </BitGridItem>

    </BitGrid>
    <br />
    <br />
    <section class="section-card">
        <BitText Typography="BitTypography.H5" Gutter>Visual Studio</BitText>
        <br />
        <BitCarousel Style="height:unset;aspect-ratio:1/.55" AutoPlay=true InfiniteScrolling=true AutoPlayInterval="5000">
            <BitCarouselItem>
                <div class="image-container">
                    <img src="images/templates/create-new-project-vs-1.webp">
                </div>
            </BitCarouselItem>
            <BitCarouselItem>
                <div class="image-container">
                    <img src="images/templates/create-new-project-vs-2.webp" />
                </div>
            </BitCarouselItem>
        </BitCarousel>
        <br />
        <div class="section-card-txt">
            <b>Note</b>: In second window of create new project modal, make sure to check <b>Place solution and project in the same directory</b> checkbox.
        </div>
    </section>
</div>

<NavigationButtons Prev="Project structure" PrevUrl="/templates/project-structure" Next="Run project" NextUrl="/templates/run-project" />
